<template>
    <div class="slider">
        <div class="slider-container">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide  v-for="(item,index) in content" :key="index">
                    <img :src="item['image_url']" alt="">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
            
            
            <!-- <mt-swipe :auto="4000" :speed="450">
                <mt-swipe-item v-for="(item,index) in content" :key="index">
                    <img :src="item['image_url']" alt="">
                </mt-swipe-item>
            </mt-swipe> -->
        </div>
    </div>
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui';

export default {
    name:'slider',
    props:['content'],
    data(){
        return {
            swiperOption: {
                initialSlide:0,
                direction:'horizontal',
                loop: true,
                observer: true,
                observerParents: true,
                paginationClickable: true,
                pagination:{
                    el:'.swiper-pagination'
                },
                autoplay: true,
                speed:600,
                on:{
                    slideChangeEnd:(swiper) => {
                        swiper.update();
                    }
                }
            }
        }
    },
    mounted(){
        let num = 0;
        let that = this;
    },
    computed:{
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    components:{
        Swipe,
        SwipeItem
    }
}
</script>

<style lang='less'>
@rem:100rem;

.slider{
    width: 750/@rem;
    .slider-container{
        width: 100%;
        height: 296/@rem;
        z-index: 99999999;
        img{
            width: 750/@rem;
            height: 296/@rem;
        }
    }
}
</style>
